<template>
  <div class="wrapper">
    <header>
        <!-- 跳转设置 -->
        <li @click="goToAppointment" class="back-button">
          <img class="icon" :src="'src/img/left.png'" alt="返回图标">
        </li>
      <div v-if="user" class="user-info" >
        <p>{{ user.realName }}！</p>
      </div>
    </header>
    <div class="top-ban"></div>

    <ul class="hospital">
      <li v-for="(hospital, index) in hospitals" :key="index">
        <h3 @click="navigateToSetmeal(hospital)">
          {{ hospital.name }}
          <i class="fa fa-angle-right"></i>
        </h3>
        <img :src="getHospitalImage(hospital.picture)" alt="Hospital Image"
          style="width: 22vw; height: 22vw; object-fit: cover; border-radius: 1vw;">
        <div class="hospital-info">
          <table>
            <tr>
              <td>营业时间</td>
              <td>{{ hospital.businessHours }}</td>
            </tr>
            <tr>
              <td>采血截止</td>
              <td>{{ hospital.deadline }}</td>
            </tr>
            <tr>
              <td>电话</td>
              <td>{{ hospital.telephone }}</td>
            </tr>
            <tr>
              <td>地址</td>
              <td>{{ hospital.address }}</td>
            </tr>
          </table>
        </div>
        <div class="about">
          <p>
            <i class="fa fa-phone"></i>
            联系我们
          </p>
          <p>
            <i class="fa fa-map-marker"></i>
            查找位置
          </p>
        </div>
      </li>
    </ul>

    <div class="bottom-ban"></div>
    <Footer></Footer>

  </div>
</template>

<script>
import axios from 'axios'; // 引入 axios 库，用于发送 HTTP 请求
import Footer from '@/components/Footer.vue'; // 引入名为 'Footer.vue' 的组件
import { getSessionStorageItem, setSessionStorage } from '../common.js'; // 引入 getSessionStorageItem 和 setSessionStorage 方法

export default {
  setup() {
    const user = getSessionStorageItem('user'); // 使用 getSessionStorageItem 方法获取用户数据
    return { user }; // 返回 user 对象，用于在模板中访问用户数据
  },
  data() {
    return {
      hospitals: [] // 存储医院数据的数组
    };
  },
  components: {
    Footer // 注册 Footer 组件
  },
  created() {
    // 组件创建时调用的钩子函数，用于初始化数据
    this.fetchHospitals(); // 调用方法获取医院数据
  },
  methods: {
    async fetchHospitals() {
      // 异步方法，从后端获取医院数据
      try {
        const response = await axios.get('http://localhost:8080/hospital/list'); // 发送 GET 请求获取医院数据
        this.hospitals = response.data.data; // 更新组件的 hospitals 数组为获取到的医院数据
      } catch (error) {
        console.error('获取医院数据出错:', error); // 如果请求失败，打印错误信息到控制台
      }
    },
    navigateToSetmeal(hospital) {
      // 跳转到套餐页面的方法，传递所选医院的 hpId
      setSessionStorage('selectedHospitalId', hospital.hpId); // 存储选定医院的 hpId 到 sessionStorage
      this.$router.push({ name: 'setmeal', query: { hospitalId: hospital.hpId } }); // 使用 query 参数传递医院的 hpId
    },
    getHospitalImage(picture) {
      // 根据图片名称返回医院图片的路径（根据实际情况替换路径逻辑）
      return `src/img/${picture}`; // 返回图片路径，假设图片存储在 'src/img/' 目录下
    },
    goToAppointment() {
      // 跳转到预约页面的方法
      this.$router.push('/appointment'); // 使用 Vue Router 跳转到指定路径 '/appointment'
    }
  }
};
</script>




{
"total": 5,
"data": [

{
"hpId": 4,
"name": "广州第二中心医院",
"picture": "https://example.com/hospital2.jpg",
"telephone": "020-87654321",
"address": "广州市天河区天河路888号",
"businessHours": "07:30-18:00",
"deadline": "17:30",
"rule": "请遵守医院规定",
"state": 1
},
{
"hpId": 5,
"name": "广州第三康复医院",
"picture": "https://example.com/hospital3.jpg",
"telephone": "020-98765432",
"address": "广州市番禺区大石街道300号",
"businessHours": "08:30-17:30",
"deadline": "17:00",
"rule": "请保持环境整洁",
"state": 1
}
]
}


<style scoped>
/*********************** 总容器 ***********************/
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #F9F9F9;
}

/*********************** header ***********************/
header li {
list-style-type: none;
}

  /* 跳转设置 */
  .icon{
float: left;

width: 80%;
height: 7.2vw;
}


.user-info{
  float: right;
}
header {
  width: 100%;
  height: 15.7vw;
  background-color: #FFF;

  position: fixed;
  left: 0;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
  padding: 0 3.6vw;
}

header .fa {
  font-size: 8vw;
}

/*********************** footer ***********************/
footer {
  width: 100%;
  height: 14.2vw;
  box-sizing: border-box;
  border-top: solid 1px #E9E9E9;
  background-color: #FFF;

  position: fixed;
  left: 0;
  bottom: 0;
}

footer ul {
  width: 100%;
  height: 14.2vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

footer ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  font-size: 3vw;
  color: #999;

  user-select: none;
  cursor: pointer;
}

footer ul li .fa {
  font-size: 5vw;
}

/*********************** common样式 ***********************/
.top-ban {
  width: 100%;
  height: 15.7vw;
}

.bottom-ban {
  width: 100%;
  height: 14.2vw;
}

/*********************** hospital ***********************/
.hospital {
  width: 100%;
  margin-top: 3.6vw;
}

.hospital li {
  width: 92.8vw;
  margin: 0 auto;
  border: solid 1px #EEE;
  border-radius: 1vw;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .08);
  background-color: #FFF;
  margin-bottom: 3.6vw;

  box-sizing: border-box;
  padding: 4vw;
}

.hospital li h3 {
  box-sizing: border-box;
  padding-left: 2.4vw;
  border-left: solid 3px #157999;
  font-size: 4.3vw;
  display: flex;
  justify-content: space-between;

  user-select: none;
  cursor: pointer;
}

.hospital li h3 i {
  font-size: 5vw;
}

.hospital li .hospital-info {
  width: 79vw;
  /* 根据您的布局调整宽度 */
  margin-top: 4vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* 确保内容对齐 */
}

.hospital li .hospital-info img {
  width: 52vw;
  height: 52vw;
  object-fit: cover;
  border-radius: 1vw;
}

.hospital li .hospita-info table {
  width: 79vw;
  font-size: 3.5vw;
  color: #666;
}

.hospital li .hospita-info table tr {
  height: 6vw;
}

.hospital li .hospita-info table tr td {
  vertical-align: top;
}

.hospital li .hospita-info table tr td:first-child {
  width: 15vw;
}

.hospital li .about {
  display: flex;
  justify-content: flex-end;
  margin-top: 2vw;
}

.hospital li .about p {
  width: 30vw;
  height: 8vw;
  border: solid 1px #157999;
  border-radius: 2vw;

  text-align: center;
  line-height: 8vw;
  margin-left: 2vw;

  font-size: 4vw;
  color: #157999;

  user-select: none;
  cursor: pointer;
}

.hospital li .about p i {
  color: #555;
  margin-right: 1vw;
}
</style>